<template>
    <div class="page">
        <div class="search">
            <span class="text">矿机主控板SN码：</span>
            <!-- <el-input
                clearable
                size="medium"
                ref="SNInput"
                v-model="SNInput"
                placeholder="请输入SN码"
                @keyup.enter.native="search"
            ></el-input> -->
            <div class="inputBox">
                <el-autocomplete
                    clearable
                    popper-class="my-autocomplete"
                    style="height: 40px"
                    v-model="SNInput"
                    ref="SNInput"
                    size="medium"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入SN码"
                    @focus="autocompleteFlag=true"
                    @blur="autocompleteFlag=false"
                    @clear="clearHandle"
                    @select="handleSelect"
                    @keyup.enter.native="search"
                >
                    <template slot-scope="{ item }">
                        <div class="name">{{ item }}</div>
                    </template>
                </el-autocomplete>
                <el-button size="medium" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
        </div>
    </div>
</template>

<script>
var that;
import { Button, Toast } from 'vant';
import store from '../../store/index';
export default {
    name: 'dashboard',
    components: {
        [Button.name]: Button,
        [Toast.name]: Toast
    },
    data() {
        return {
            SNInput: '',
            autocompleteFocusFlag:true,//输入框是否聚焦
        };
    },
    computed: {},
    created() {
        that = this;

        this.$nextTick(() => {
            this.$refs.SNInput.focus();
        });

        store.commit('setSystemTitle','矿机整机维修指导系统')
    },
    methods: {
        search() {
            if (!this.SNInput) {
                // this.$message.error('请输入SN码');
                Toast.fail({
                    message: '请输入SN码',
                    duration: 2000
                });
            } else {
                this.saveInputHistory(); //保存输入历史
                this.$router.push({
                    path: '/repair',
                    query: {
                        params: that.SNInput
                    }
                });
            }
        },

        // 保存输入历史
        saveInputHistory() {
            // 判断数组是否为空，空的话直接存SN
            if (5 > store.state.historyList.length > 0) {
                if (store.state.historyList.indexOf(this.SNInput) > -1) {
                    return;
                } else {
                    store.state.historyList.unshift(that.SNInput)
                    store.commit('setInputHistory', this.historyList);
                }
            } else if (store.state.historyList.length == 5){//长度等于5也就是有5条历史记录的时候，删掉第一条，再添加新的输入记录
                if (store.state.historyList.indexOf(this.SNInput) > -1) {
                    return;
                } else {
                    let list = store.state.historyList
                    list.splice(4,1)
                    list.unshift(that.SNInput)
                    store.commit('setInputHistory', list);
                }
            } else if(store.state.historyList.length == 0) {
                store.state.historyList.push(that.SNInput);
                store.commit('setInputHistory', this.historyList);
            }
        },

        // 点击清除图标清除输入框事件,清除之后，保持输入提示内容
        clearHandle(){
            if(this.autocompleteFocusFlag) this.$refs.SNInput.activated = true;
        },

        querySearch(queryString, cb) {
            // 调用 callback 返回建议列表的数据
            cb(store.state.historyList);
        },
        handleSelect(item) {
            this.SNInput = item
        },
    },

    mounted() {
        this.historyList = store.state.historyList;
    }
};
</script>


<style lang="less" scoped>
.page {
    position: relative;
    width: 100%;
    height: 100%;
    .search {
        position: absolute;
        top: 30%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        transform: translate(-50%, -50%);
        font-size: 38px;
        font-weight: bold;
        color: #7f7f7f;

        .my-autocomplete {
            li {
                line-height: normal;
                padding: 7px;

                .name {
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .addr {
                    font-size: 12px;
                    color: #b4b4b4;
                }

                .highlighted .addr {
                    color: #ddd;
                }
            }
        }

        /deep/ .el-input__inner {
            width: 500px;
            height: 49px;
        }
        .el-button,
        .el-button--default {
            margin-left: 10px;
            height: 49px;
        }
    }


}
</style>
